<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>操作记录</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="../../lib/layui/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
  </head>

  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
          <legend>搜索信息</legend>
          <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">ID</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      name="id"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">用户ID</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      name="user_id"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">IP</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      name="ip"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">请求方法</label>
                  <div class="layui-input-inline">
                    <select class="layui-select" name="method" >
                      <option value=""></option>
                      <option value="GET" disabled>GET</option>
                      <option value="POST">POST</option>
                    </select>
                  </div>
                </div>
                <div class="layui-inline">
                  <button
                    type="submit"
                    class="layui-btn layui-btn-primary"
                    lay-submit
                    lay-filter="data-search-btn"
                  >
                    <i class="layui-icon"></i> 搜 索
                  </button>
                </div>
              </div>
            </form>
          </div>
        </fieldset>

        <table
          class="layui-hide"
          id="currentTableId"
          lay-filter="currentTableFilter"
        ></table>
      </div>
    </div>
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js" charset="utf-8"></script>
    <script>
      layui.use(["form", "table"], function () {
        var $ = layui.jquery,
          form = layui.form,
          table = layui.table;

        table.render({
          elem: "#currentTableId",
          url: "/admin/operation_log/list", // 换成相应的运营平台接口
          toolbar: "#toolbarDemo",
          defaultToolbar: ["filter", "exports", "print"],
          parseData: function (res) {
            //res 即为原始返回的数据
            return {
              code: res.code == 200 ? 0 : res.code, //解析接口状态
              msg: res.message, //解析提示文本
              count: res.data.total, //解析数据长度
              data: res.data.data, //解析数据列表
            };
          },
          cols: [
            [
              {
                field: "id",
                width: 80,
                title: "ID",
              },
              {
                field: "user_id",
                width: 80,
                title: "用户ID",
                align: "center",
              },
              {
                field: "ip",
                width: 100,
                title: "IP",
                align: "center",
              },
              {
                field: "path",
                title: "路径"
              },
              {
                field: "method",
                width: 80,
                title: "请求方法"
              },
              {
                field: "params",
                title: "请求参数",
              },
              {
                field: "result",
                title: "请求结果"
              },
              {
                field: "runtime",
                width: 100,
                title: "时间（秒）",
                align: "center",
              },
              {
                field: "created_at",
                title: "记录时间",
                align: "center",
              },
            ],
          ],
          limits: [10, 15, 20, 25, 50, 100],
          limit: 15,
          page: true,
        });

        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          var result = JSON.stringify(data.field);

          //执行搜索重载
          table.reload(
            "currentTableId",
            {
              page: {
                curr: 1,
              },
              where: {
                searchParams: result,
              },
            },
            "data"
          );

          return false;
        });

        /**
         * toolbar监听事件
         */
        table.on("toolbar(currentTableFilter)", function (obj) {});

        //监听表格复选框选择
        table.on("checkbox(currentTableFilter)", function (obj) {
          // console.log(obj)
        });

        table.on("tool(currentTableFilter)", function (obj) {
          var data = obj.data;
        });
      });
    </script>
    <script></script>
  </body>
</html>
